<template>
  <!-- 根据当前路由判断是否显示侧边栏布局 -->
  <div v-if="$route.path === '/login'">
    <router-view></router-view>
  </div>
  <div v-else class="app-container">
    <!-- 侧边栏 -->
    <div class="sidebar">
      <!-- 系统标题 -->
      <div class="logo">
        <!-- <img src="@/assets/logo.svg" alt="Logo" /> -->
        <span>管理系统</span>
      </div>
      <div class="menu">
        <div class="menu-item">
          <span @click="$router.push('/')">首页</span>
        </div>

        <div class="menu-item" @click="toggleSubmenu('property')">
          <span>公告管理</span>
          <i class="arrow" :class="{ 'arrow-down': openSubmenus.property }"></i>
        </div>
        <template v-if="openSubmenus.property">
          <div class="menu-item sub-item">
            <span @click="$router.push('/gg')">公告列表</span>
          </div>
        </template>

        <div class="menu-item" @click="toggleSubmenu('goods')">
          <span>商品管理</span>
          <i class="arrow" :class="{ 'arrow-down': openSubmenus.goods }"></i>
        </div>
        <template v-if="openSubmenus.goods">
          <div class="menu-item sub-item">
            <span @click="$router.push('/cater')">商品列表</span>
          </div>
        </template>

        <div class="menu-item" @click="toggleSubmenu('settings')">
          <span>管理员设置</span>
          <i class="arrow" :class="{ 'arrow-down': openSubmenus.settings }"></i>
        </div>
        <template v-if="openSubmenus.settings">
          <div class="menu-item sub-item">
            <span @click="$router.push('/gly')">管理员列表</span>
          </div>
        </template>

        <div class="menu-item" @click="toggleSubmenu('role')">
          <span>角色管理</span>
          <i class="arrow" :class="{ 'arrow-down': openSubmenus.role }"></i>
        </div>
        <template v-if="openSubmenus.role">
          <div class="menu-item sub-item">
            <span @click="$router.push('/role')">角色列表</span>
          </div>
        </template>

        <div class="menu-item" @click="toggleSubmenu('editor')">
          <span>分类管理</span>
          <i class="arrow" :class="{ 'arrow-down': openSubmenus.editor }"></i>
        </div>
        <template v-if="openSubmenus.editor">
          <div class="menu-item sub-item">
            <span @click="$router.push('/fl')">分类列表</span>
          </div>
        </template>

        <div class="menu-item" @click="toggleSubmenu('tables')">
          <span>部门管理</span>
          <i class="arrow" :class="{ 'arrow-down': openSubmenus.tables }"></i>
        </div>
        <template v-if="openSubmenus.tables">
          <div class="menu-item sub-item">
            <span @click="$router.push('/department')">部门列表</span>
          </div>
        </template>

        <div class="menu-item" @click="toggleSubmenu('maps')">
          <span>订单管理</span>
          <i class="arrow" :class="{ 'arrow-down': openSubmenus.maps }"></i>
        </div>
        <template v-if="openSubmenus.maps">
          <div class="menu-item sub-item">
            <span @click="$router.push('/order')">订单列表</span>
          </div>
        </template>

        <div class="menu-item" @click="toggleSubmenu('menu')">
          <span>菜单管理</span>
          <i class="arrow" :class="{ 'arrow-down': openSubmenus.menu }"></i>
        </div>
        <template v-if="openSubmenus.menu">
          <div class="menu-item sub-item">
            <span @click="$router.push('/menu')">菜单列表</span>
          </div>
        </template>

        <div class="menu-item" @click="toggleSubmenu('lt')">
          <span>论坛管理</span>
          <i class="arrow" :class="{ 'arrow-down': openSubmenus.lt }"></i>
        </div>
        <template v-if="openSubmenus.lt">
          <div class="menu-item sub-item">
            <span @click="$router.push('/lt')">论坛列表</span>
          </div>
        </template>

        <div class="menu-item" @click="toggleSubmenu('lf')">
          <span>论坛分类管理</span>
          <i class="arrow" :class="{ 'arrow-down': openSubmenus.lf }"></i>
        </div>
        <template v-if="openSubmenus.lf">
          <div class="menu-item sub-item">
            <span @click="$router.push('/lf')">论坛分类列表</span>
          </div>
        </template>
      </div>
    </div>
    <!-- 主内容区 -->
    <div class="main-content">
      <!-- 顶部栏 -->
      <div class="header">
        <div class="user-info">
          <span class="username">admin</span>
          <button class="logout-btn" @click="logout">退出</button>
        </div>
      </div>
      <div class="content">
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      openSubmenus: {
        property: false,
        goods: false,
        settings: false,
        editor: false,
        tables: false,
        maps: false,
      },
    }
  },
  methods: {
    toggleSubmenu(menu) {
      this.openSubmenus[menu] = !this.openSubmenus[menu]
    },
    logout() {
      // 退出登录的逻辑
      this.$router.push('/login')
    },
  },
}
</script>

<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.app-container {
  display: flex;
  height: 100vh;
  width: 100%;
}

.sidebar {
  width: 180px;
  background-color: #001529;
  color: white;
  height: 100%;
  overflow-y: auto;
}

.logo {
  display: flex;
  align-items: center;
  padding: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.logo img {
  width: 24px;
  height: 24px;
  margin-right: 8px;
}

.logo span {
  color: white;
  font-size: 16px;
  font-weight: 500;
}

.menu {
  padding: 10px 0;
}

.menu-item {
  padding: 12px 20px;
  cursor: pointer;
  font-size: 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.menu-item:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.menu-item.active {
  color: #1890ff;
}

.sub-item {
  padding-left: 35px;
  font-size: 13px;
}

.arrow {
  border: solid white;
  border-width: 0 2px 2px 0;
  display: inline-block;
  padding: 3px;
  transform: rotate(-45deg);
  transition: transform 0.3s;
}

.arrow-down {
  transform: rotate(45deg);
}

.main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  background-color: #f0f2f5;
  overflow-y: auto;
}

.header {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  height: 60px;
  padding: 0 20px;
  background-color: #fff;
  border-bottom: 1px solid #f0f0f0;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 15px;
}

.username {
  font-size: 14px;
  color: #333;
}

.logout-btn {
  padding: 6px 12px;
  background-color: #f5f5f5;
  border: 1px solid #ddd;
  border-radius: 4px;
  color: #333;
  cursor: pointer;
  font-size: 12px;
  transition: all 0.3s;
}

.logout-btn:hover {
  background-color: #ff4d4f;
  border-color: #ff4d4f;
  color: white;
}

.content {
  padding: 20px;
  flex: 1;
}
</style>
